<template>
  <div >
    <form-head @onSubmit="onSubmit" :is_change="is_change"/>
    <el-form ref="form" :rules="rules" :model="form" label-width="130px" class="layout-all form-width" :label-position="isMobile()?'top':'left'">
      <el-form-item label="视频名称:" prop="video_name">
        <el-input
          v-model="form.video_name"
          placeholder="请输入视频名称"
        />
      </el-form-item>

      <el-form-item label="视频分类:" prop="cat_id">
        <el-select v-model="form.cat_id" placeholder="请选择">
          <el-option
            v-for="item in cat_options"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="图片:" prop="original_img">
        <upload-pic :thumb="form.original_img" @update:thumb="form.original_img=$event" width="100"/>
      </el-form-item>

      <el-form-item label="商品编号:" prop="goods_sn">
        <el-input
          v-model="form.goods_sn"
          placeholder="请输入商品编号"
        />
      </el-form-item>

      <el-form-item label="关键字:" prop="keywords">
        <el-input
          v-model="form.keywords"
          placeholder="请输入关键字"
        />
      </el-form-item>

      <el-form-item label="视频路径:" prop="url">
        <el-input
          v-model="form.url"
          placeholder="请输入视频路径"
        />
        <el-link type="success" icon="el-icon-video-camera-solid" style="margin:0 10px" @click="logistics_isshow=true">选择视频</el-link>
      </el-form-item>

      <el-form-item label="外部链接地址:" prop="link_url">
        <el-input
          v-model="form.link_url"
          placeholder="请输入外部链接地址"
        />
      </el-form-item>

      <el-form-item label="视频简介:" prop="video_remark">
        <el-input
          type="textarea"
          :rows="5"
          v-model="form.video_remark"
          placeholder="请输入视频简介"
        />
      </el-form-item>

      <el-form-item label="收藏数:" prop="collent">
        <el-input
          v-model="form.collent"
          placeholder="请输入收藏数"
        />
      </el-form-item>
      <el-form-item label="排序:" prop="sort">
        <el-input-number
          v-model="form.sort"
          class="form-width-n"
          placeholder="请输入排序"
        />
      </el-form-item>
      <el-form-item label="是否外部链接:" prop="is_link">
        <el-switch v-model="form.is_link" />
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-close" circle @click="bk()" />
        <el-button
          type="success"
          icon="el-icon-check"
          circle
          @click="onSubmit('form')"
        />
      </el-form-item>
    </el-form>
    <!-- 视频库 -->
    <drawer title="视频库" :isShow="logistics_isshow"  @update:isShow="logistics_isshow=false" width=".5">
      <video-manager @selectVideo="selectVideo"></video-manager>
    </drawer>
  </div>

</template>

<script>
import richText from "../../components/rich_text/rich_text";
import videoManager from "../../components/videoManager/videoManager";
export default {
  name:'video_form',
  components: { richText,videoManager },
  data() {
    return {
      //是否显示视频库列表
      logistics_isshow:false,
      is_change: undefined,
      is_show: true,
      id: 0,
      cat_options: [],
      form: {
        id: 24,
        video_id:'',
        video_name: "",
        cat_id: 0,
        original_img: "",
        collent: 0,
        url: "",
        is_link: true,
        goods_id: 0,
        link_url: "",
        sort: 0,
        video_remark: "",
        keywords: "",
        goods_sn: "",
      },
      rules: {
        video_name: [
          { required: true, message: "请输入视频名称", trigger: "blur" },
        ],
        cat_id: [
          { required: true, message: "请选择视频分类", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    this.id = (this.$route.params && this.$route.params.id)||0
    this.$setTagsViewTitle(this.id)
    this.init_into();
  },
  methods: {
    //选择视频回调
    selectVideo (item) {
      console.log(item)
      this.form.video_id = item.id
      this.form.url = item.url
      this.logistics_isshow = false
    },
    // 出售时间
    dateChange() {
      const date = new Date(this.form.publish_time);
      const Y = date.getFullYear() + "";
      const M =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      const D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      this.form.publish_time = Y + "-" + M + "-" + D;
    },

    // 提交
    onSubmit(formName) {
      const form = this.form;
      console.log(form);
      this.$refs[formName].validate((valid) => {
        if (valid) {
          form.id = this.id;
          form.is_link === true ? (form.is_link = 1) : (form.is_link = 0);
          this.get("/admin/Video/save", form, "POST").then((e) => {
            this.$msg_ok("success", "操作成功");
            this.$back();
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
      console.log("submit!");
    },
    // 返回
    bk() {
      this.$router.back();
    },
    // 获取当前数据
    init_into() {
      this.get("/admin/Video/info?id=" + this.id, "POST").then((e) => {
        const tpl = e.info.tpl;
        
        this.cat_options = e.cate;
        if(this.id>0){
        this.form = e.info.tpl;
        this.form.is_link =this.form.is_link== 1
        }
       
        setTimeout(()=>{this.is_change=false},100)
      });
    }
  },
  watch: {
    form:{
      handler (val, oldVal) {
        if(this.is_change!=undefined)
          this.is_change=true
      },
      deep:true
    }
  }
};
</script>

<style>
.layout-all {
  margin: 10px;
}
.spces_div {
  border: 1px solid #dcdfe6;
  height: 100%;
  width: 30%;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 10px;
}
.avatar_img {
  width:148px;
  height:148px;
}
</style>
